﻿
@model Sharp.WebBooter.Areas.CMS.Models.TagViewModel
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title" id="myModalLabel">@Model.PageTitle</h4>
            </div>
            <div class="modal-body" id="modalcontent">
                @using (Html.Bootstrap().BeginForm(c => c.Horizontal()))
                {
                    @Html.ValidationSummary()
                    <div class="form-group">
                        @Html.LabelFor(m => m.Name, new {@class = "col-sm-2 control-label"})
                        <div class="col-sm-10">

                            @Html.Bootstrap().TextBoxFor(m => m.Name).Placeholder("请输入名称")

                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.Initial, new {@class = "col-sm-2 control-label"})
                        <div class="col-sm-10">
                            @Html.Bootstrap().TextBoxFor(m => m.Initial).Placeholder("首字母")
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.CategoryId, new {@class = "col-sm-2 control-label"})
                        <div class="col-sm-10">
                            <input id="orgSel" class="form-control" type="text" value="@Model.Category.Name" onfocus="showMenu(this); "/>
                            @Html.HiddenFor(m => m.CategoryId)
                            <div id="ParentmenuContent" class="menuContent" style="display: none; position: absolute; display: none; left: 15px; top: 33px; z-index: 1000;">
                                <ul id="Parentdropdownmenu" class="ztree" style="margin-top: 0; width: 260px;"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.Remark, new { @class = "col-sm-2 control-label" })
                        <div class="col-sm-10">

                            @Html.Bootstrap().TextareaFor(m => m.Remark)

                        </div>
                    </div>
                    @Html.HiddenFor(x => x.Id)
                }
            </div>
            <div class="modal-footer">
                @Html.Bootstrap().Button("保存").Style(BootstrapStyle.Primary).Click("window.app.saveForm(event,'" + @Url.Action("Save") + "');")
                @Html.Bootstrap().Button("关闭").Style(BootstrapStyle.Default).Attribute("data-dismiss", "modal")
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var setting = {
        view: {
            dblClickExpand: false
        },
        data: { simpleData: { enable: true }
        },
        callback: {
            onClick: onClick
        }
    };
    var data = @MvcHtmlString.Create(Model.TreeNode.ToJson());
    var zNodes = data.children;

    function onClick(e, treeId, treeNode) {
        $("#orgSel").attr("value", treeNode.name);
        $("#ParentId").val(treeNode.id);
    }

    function showMenu(treeSel) {
        $("#ParentmenuContent")
            .slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#ParentmenuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "ParentmenuContent" || $(event.target).parents("#ParentmenuContent").length>0)) {
            hideMenu();
        }
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#Parentdropdownmenu"), setting, zNodes);

        var treeObj = $.fn.zTree.getZTreeObj("Parentdropdownmenu");
        var node = treeObj.getNodeByParam("id", '@Model.CategoryId', null);
        if(node)
            treeObj.selectNode(node);
    });
</script>